<template>
	<view class="page">
		<uni-title :title="orderInfo.orderNo" type="h2" align="center"></uni-title>
		<uni-section title="主摄像头" type="line">
			<video class="shop-video" v-if="orderInfo.hostVideo" :src="orderInfo.hostVideo"></video>
			<empty-view v-else></empty-view>
		</uni-section>
		<uni-section title="辅摄像头" type="line" v-if="orderInfo.subVideo">
			<video class="shop-video" v-if="orderInfo.subVideo" :src="orderInfo.subVideo"></video>
			<empty-view v-else></empty-view>
		</uni-section>
	</view>
</template>

<script>
	import EmptyView from '@/components/EmptyView'
	import moment from 'moment'
	
	export default {
		components: {
			EmptyView
		},
		data() {
			return {
				orderId: "",
				orderInfo: {}
			}
		},
		
		onLoad(options) {
			this.orderId = options.orderId
			
			this.getOrderInfo()
		},
		
		methods: {
			getOrderInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/orderDetail',
					data: {
						orderId: this.orderId
					},
					success: res => {
						if(res.data.success) {
							this.orderInfo = res.data.result
							this.orderInfo.hostVideo = `https://xyb2023.oss-cn-hangzhou.aliyuncs.com/videos/${moment(this.orderInfo.orderTime).format('YYMMDD')}/${this.orderInfo.orderId}_h.mp4`
							this.orderInfo.subVideo = `https://xyb2023.oss-cn-hangzhou.aliyuncs.com/videos/${moment(this.orderInfo.orderTime).format('YYMMDD')}/${this.orderInfo.orderId}_s.mp4`
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}
	
	.shop-video {
		margin: 0 25rpx;
		width: 700rpx;
	}
</style>